<template>
  <div class="main-background">
    <el-row :gutter="20" class="page-container">


      <el-col :span="24" :offset="0" class=" dog-style animated-card">
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <div class="card-header">
              <h2 class="artistic-title plant-title">文章推荐<span class="decor-leaf">🌿</span></h2>
            </div>
          </el-col>

          <el-col :span="14" :offset="0">
            <Carousel></Carousel>
          </el-col>
          <el-col :span="10" :offset="0">
            <popularNew></popularNew>
          </el-col>
        </el-row>
      </el-col>

      <el-col class=" cat-style animated-card" :span="24" :offset="0">
        <div class="card-header">
          <h2 class="artistic-title cat-title">🐾宠物一览🐾<span class="decor-paw">🐾</span></h2>
          <div class="paw-prints">
            <span class="paw">🐾</span>
            <span class="paw">🐾</span>
            <span class="paw">🐾</span>
          </div>
        </div>
        <Baike></Baike>
      </el-col>


      <!-- 注意事项 - 警示风格 -->
      <el-col :span="24" :offset="0" class="section-margin">
        <el-row :gutter="20">
          <el-col class="new1-box warning-style animated-card" :span="12" :offset="0">
            <div class="card-header">
              <h2 class="artistic-title warning-title">🐱猫咪推荐</h2>
              <div class="warning-icons">
                <span class="heart-icon">💝</span>
                <span class="warning-icon">🎀</span>
              </div>
            </div>
            <AnimeNew1></AnimeNew1>
          </el-col>

          <!-- 推荐模块 - 柔和风格 -->
          <el-col class="new2-box soft-style animated-card" :span="12" :offset="0">
            <div class="card-header">
              <h2 class="artistic-title  soft-title">🐶狗狗推荐</h2>
              <div class="heart-icons">
                <span class="heart-icon">💕</span>
                <span class="heart-icon">💗</span>
              </div>
            </div>
            <AnimeNew2></AnimeNew2>
          </el-col>
        </el-row>
      </el-col>

      <!-- 组合模块 - 双色边框 -->
      <el-col :span="24" :offset="0" class="baike-wike-box duo-border animated-card section-margin">
        <div class="card-header">
          <h2 class="artistic-title duo-title">🔗萌宠百科⚡</h2>
          <div class="sparkles">
            <span class="sparkle">✨</span>
            <span class="sparkle">⚡</span>
            <span class="sparkle">✨</span>
          </div>
        </div>
        <Baike_wike></Baike_wike>
      </el-col>


      <!-- 图片模块 - 悬浮效果 -->
      <!-- <el-col class="img-box hover-effect animated-card section-margin" :span="24" :offset="0">
        <div class="card-header">
          <h2 class="artistic-title hover-title">📷宠物相册✨</h2>
          <div class="camera-icons">
            <span class="camera-icon">📸</span>
            <span class="camera-icon">🎞️</span>
          </div>
        </div>
        <AnimeImg></AnimeImg>
      </el-col> -->

      <!-- 文字百科 - 简约风格
      <el-col class="baike-text-box minimal-style animated-card section-margin" :span="24" :offset="0">
        <div class="card-header">
          <h2 class="artistic-title minimal-title">📖宠物大全✍️</h2>
          <div class="book-icons">
            <span class="book-icon">📚</span>
            <span class="book-icon">📝</span>
          </div>
        </div>
        <animeBaikeT></animeBaikeT>
      </el-col> -->
    </el-row>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

import Baike from '@/views/home/animeBaike.vue';
import AnimeWike from '@/views/home/animeWike.vue';
import AnimeCarousel from '@/views/home/animeCarousel.vue';
import Baike_wike from './home/baike_wike.vue';
import AnimeNew1 from '@/views/home/animeNew1.vue';
import AnimeNew2 from '@/views/home/animeNew2.vue';
import AnimeImg from '@/views/home/animeImg.vue';
import animeBaikeT from '@/views/home/animeBaikeT.vue';
import Carousel from '@/views/home2/Carousel.vue'
import popularNew from '@/views/home2/popularNew.vue'

</script>

<style scoped>
/* 通用样式调整 */
.main-background {
  background-color: #f9f7fe;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9b6e4' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  min-height: 100vh;
  padding-bottom: 30px;
}

.page-container {
  padding: 25px;
  max-width: 1400px;
  margin: 0 auto;
}

.section-margin {
  margin-top: 25px;
}

/* 卡片通用样式 */
.animated-card {
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  position: relative;
}

.animated-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  position: relative;
}

/* 标题通用样式 */
.artistic-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.artistic-title:hover {
  transform: scale(1.03);
}

/* 猫咪风格模块 */
.cat-style {
  background: #fff0f6;
  border: 3px solid #ffb3c8;
  box-shadow: 0 4px 15px rgba(255, 182, 193, 0.3);
  position: relative;
}

/* 猫咪风格模块 */
.dog-style {
  background: #fff0f6;
  border: 3px solid #b7ffb3;
  box-shadow: 0 4px 15px rgba(255, 182, 193, 0.3);
  position: relative;
}

.cat-style::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff9eb6' fill-opacity='0.1'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

.cat-title {
  color: #ff69b4 !important;
  position: relative;
}

.cat-title::after {
  content: '🐱';
  position: absolute;
  right: 20px;
  animation: bounce 2s infinite;
}

.paw-prints {
  display: flex;
  gap: 10px;
}

.paw {
  animation: fadeInOut 3s infinite;
  opacity: 0.7;
}

.paw:nth-child(2) {
  animation-delay: 0.5s;
}

.paw:nth-child(3) {
  animation-delay: 1s;
}

/* 植物风格模块 */
.plant-style {
  background: #f0fff3;
  border: 2px dashed #7ac87a;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.plant-style::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(122, 200, 122, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: 0;
}

.plant-title {
  color: #2e8b57 !important;
}

.plant-title .decor-leaf {
  color: #90c695;
  margin-left: 10px;
  animation: wiggle 3s ease-in-out infinite;
  display: inline-block;
}

.floating-leaves {
  display: flex;
  gap: 15px;
}

.leaf {
  animation: float 5s ease-in-out infinite;
  opacity: 0.8;
}

.leaf:nth-child(2) {
  animation-delay: 1.5s;
}

.leaf:nth-child(3) {
  animation-delay: 3s;
}

/* 渐变背景模块 */
.gradient-bg {
  background: linear-gradient(135deg, #ffe8f0 0%, #f8f4ff 100%);
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.gradient-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 60%);
  opacity: 0.4;
  animation: rotate 20s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.gradient-title {
  background: linear-gradient(45deg, #ff6b6b, #ff8e53);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  z-index: 1;
  text-shadow: none;
}

/* 双色边框模块 */
.duo-border {
  border: 4px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #fff, #fff), linear-gradient(45deg, #ff69b4, #ff9a9e);
  position: relative;
  z-index: 1;
}

.duo-title {
  color: #e83e8c !important;
  position: relative;
}

.sparkles {
  display: flex;
  gap: 12px;
}

.sparkle {
  animation: pulse 2s infinite;
}

.sparkle:nth-child(2) {
  animation-delay: 0.7s;
}

.sparkle:nth-child(3) {
  animation-delay: 1.4s;
}

/* 警示风格 */
.warning-style {
  background: #fff3f3;
  border: 2px solid #ff6b6b;
  position: relative;
  overflow: hidden;
}

.warning-style::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #ffecec transparent transparent;
  z-index: 0;
}

.warning-title {
  color: #ff4444 !important;
}

.warning-icons {
  display: flex;
  gap: 10px;
}

.warning-icon {
  animation: flash 3s infinite;
}

.warning-icon:nth-child(2) {
  animation-delay: 1.5s;
}

/* 柔和推荐模块 */
.soft-style {
  background: #fff9fd;
  box-shadow: 0 2px 12px rgba(255, 182, 193, 0.2);
  border: 2px solid #303088;
  position: relative;
  overflow: hidden;
}

.soft-style::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 182, 193, 0.1) 100%);
  z-index: 0;
  pointer-events: none;
}

.soft-title {
  color: #e83e8c !important;
}

.heart-icons {
  display: flex;
  gap: 8px;
}

.heart-icon {
  animation: heartbeat 1.5s infinite;
}

.heart-icon:nth-child(2) {
  animation-delay: 0.5s;
}

.heart-icon:nth-child(3) {
  animation-delay: 1s;
}

/* 悬浮效果模块 */
.hover-effect {
  background: linear-gradient(to right, #f6f7f8, #edeef1);
  border-radius: 12px;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}

.hover-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 70%);
  z-index: 0;
}

.hover-effect:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.hover-title {
  color: #5d6d7e !important;
}

.camera-icons {
  display: flex;
  gap: 12px;
}

.camera-icon {
  animation: zoomIn 3s infinite;
  transform-origin: center;
}

.camera-icon:nth-child(2) {
  animation-delay: 1.5s;
}

/* 简约文字模块 */
.minimal-style {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  box-shadow: none;
  transition: all 0.3s ease;
}

.minimal-style:hover {
  background: #ffffff;
  border-color: #adb5bd;
}

.minimal-title {
  color: #495057 !important;
}

.book-icons {
  display: flex;
  gap: 10px;
}

.book-icon {
  animation: slideIn 3s infinite;
}

.book-icon:nth-child(2) {
  animation-delay: 1.5s;
}

/* 动画效果 */
@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes fadeInOut {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

@keyframes wiggle {

  0%,
  100% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(5deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes flash {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.5;
  }
}

@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes zoomIn {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(-5px);
    opacity: 0.7;
  }

  50% {
    transform: translateX(5px);
    opacity: 1;
  }

  100% {
    transform: translateX(-5px);
    opacity: 0.7;
  }
}
</style>